<template>
    <!-- 对话框表单 -->
    <el-dialog :title="formData.id ? '编辑栏目' : '新增栏目'" width="50vw" class="ba-us-dialog" v-model="dialogVisible"
        :close-on-click-modal="false" :destroy-on-close="true">
        <el-scrollbar class="ba-table-form-scrollbar">
            <div class="ba-operate-form">
                <el-form ref="formRef" :model="formData" :rules="rules" label-width="140">
                    <el-form-item prop="name" label="栏目名称">
                        <el-input v-model="formData.name" type="string" placeholder="请输入栏目名称" maxlength="20"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="short" label="缩写">
                        <el-input v-model="formData.short" type="string" placeholder="请输入栏目名称" maxlength="20"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="page_title" label="SEO标题">
                        <el-input v-model="formData.page_title" type="string" placeholder="请输入SEO标题" maxlength="50"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="page_keywords" label="SEO关键字">
                        <el-input v-model="formData.page_keywords" type="string" placeholder="请输入SEO关键字" maxlength="50"
                            clearable></el-input>
                    </el-form-item>
                    <el-form-item prop="page_description" label="SEO描述">
                        <el-input v-model="formData.page_description" type="textarea" placeholder="请输入SEO描述"
                            maxlength="150" autosize clearable></el-input>
                    </el-form-item>
                    <el-form-item label="图片类型" prop="image">
                        <FileUpload v-model="formData.image" :limit="1"></FileUpload>
                    </el-form-item>
                </el-form>
            </div>
        </el-scrollbar>
        <div style="text-align: center;">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button @click="onSubmit(formRef)" type="primary">保存</el-button>
        </div>
    </el-dialog>
</template>

<script setup>
import { reactive, inject, ref, defineExpose, defineEmits } from 'vue'
import { addSub, updateSub } from '@/api/tag';

const emit = defineEmits(['subOk']);
const used = inject('used');
const formRef = ref(null);

//  表单数据
const formData = reactive({
    id: '',
    group_id: '',
    image: '',
    name: '',
    short: '',
    page_title: '',
    page_keywords: '',
    page_description: '',
})
//表单验证规则
const rules = reactive(
    {
        name: [
            { required: true, message: '请输入标题', trigger: 'blur' },
        ],
        short: [
            { required: true, message: '请输入缩写', trigger: 'blur' },
        ],
        page_title: [
            { required: true, message: '请输入SEO标题', trigger: 'blur' },
        ],
        page_keywords: [
            { required: true, message: '请输入SEO关键字', trigger: 'blur' },
        ],
        image: [
            { required: true, message: '请输入SEO描述', trigger: 'blur' },
        ],
        image: [
            { required: true, message: '请上传弹窗图片', trigger: 'change' },
        ]
    }
)
/* 显示 */
let dialogVisible = ref(false);
const show = (item, id) => {
    if (item) {
        Object.assign(formData, item);
    } else {
        Object.assign(formData, {
            id: '',
            group_id: id,
            image: '',
            name: '',
            short: '',
            page_title: '',
            page_keywords: '',
            page_description: '',
        });
    }
    dialogVisible.value = true;
}
/*  提交 */
const onSubmit = (formEl) => {
    formEl.validate((valid) => {
        if (valid) {
            let res = formData.id ? updateSub(formData) : addSub(formData);
            res.then((res) => {
                if (res.code == 1) {
                    used.msgSuccess(res.message);
                    dialogVisible.value = false;
                    emit('subOk');
                } else {
                    used.msgError(res.message);
                }
            })
        } else {
            return false;
        }
    });
};

defineExpose({
    show,
    dialogVisible
})
</script>

<style scoped lang="scss"></style>
